<template>
  <div class="my-header">
    <div class="left">
      <div>
        <router-link to="/index/home">
          <div>
            <img src="~@/assets/logo.png" alt="" />
          </div>
          <div>
            <span>Unsplash</span><br />
            <span >Photos for everyone</span>
          </div>
        </router-link>
      </div>
      <my-search></my-search>
    </div>
    <div class="center">
      <router-link to="/index/a" class="hoverColor">Explore</router-link>
      <router-link to="/index/b" class="hoverColor" >
        <span>
          <span>🏆</span>
          <span>Explore</span>
          Explore
        </span>
      </router-link>
      <a @click.stop="showbox"  @mouseover="isOmit = true" @mouseout="isOmit = false">
        <span>
          <svg
            width="18"
            height="18"
            version="1.1"
            viewBox="0 0 32 32"
            aria-hidden="false"
          >
            <path
              :fill="isOmit ? '#000' : '#767676'"
              d="M7 15.5c0 1.9-1.6 3.5-3.5 3.5s-3.5-1.6-3.5-3.5 1.6-3.5 3.5-3.5 3.5 1.6 3.5 3.5zm21.5-3.5c-1.9 0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5zm-12.5 0c-1.9  0-3.5 1.6-3.5 3.5s1.6 3.5 3.5 3.5 3.5-1.6 3.5-3.5-1.6-3.5-3.5-3.5z"
            ></path>
          </svg>
        </span>
        <div class="pop" >
        <div class="triangle"></div>
          <ul class="itemlist">
            <li class="hoverbox">
              <router-link to=""><span>aaaa</span></router-link>
            </li>
            <li class="hoverbox">
              <router-link to=""><span>aaaa</span></router-link>
            </li>
            <li class="hoverbox">
              <router-link to=""><span>aaaa</span></router-link>
            </li>
            <li class="hoverbox">
              <router-link to=""><span>aaaa</span></router-link>
            </li>
          </ul>
          <ul class="svglist">
            <li @mouseover="isList[0]=true" @mouseout="isList[0]=false">
              <router-link to="">
                <svg
                  width="18"
                  height="18"
                  version="1.1"
                  viewBox="0 0 32 32"
                  aria-hidden="false"
                >
                  <path
                  :fill="isList[0]?'#767676':'#d1d1d1'"
                    d="M10.2 28.9c12 0 18.6-9.9 18.6-18.6v-.8c1.2-1 2.3-2.1 3.2-3.4-1.2.5-2.5.9-3.8 1 1.4-.8 2.4-2.1 2.9-3.6-1.3.8-2.7 1.3-4.2 1.6-2.5-2.6-6.6-2.8-9.2-.3-1.7 1.6-2.4 4-1.9 6.3-5.2-.3-10-2.8-13.4-6.9-1.7 3-.9 6.8 2 8.7-1 0-2.1-.3-3-.8v.1c0 3.1 2.2 5.8 5.3 6.4-1 .3-2 .3-3 .1.9 2.7 3.3 4.5 6.1 4.6-2.3 1.8-5.2 2.8-8.1 2.8-.5 0-1 0-1.6-.1 3.1 1.9 6.6 2.9 10.1 2.9"
                  ></path>
                </svg>
              </router-link>
            </li>
            <li @mouseover="isList[1]=true" @mouseout="isList[1]=false">
              <router-link to="">
                <svg
                  width="18"
                  height="18"
                  version="1.1"
                  viewBox="0 0 32 32"
                  aria-hidden="false"
                >
                  <path
                  :fill="isList[1]?'#767676':'#d1d1d1'"
                    d="M32 16.1c0-8.9-7.2-16-16-16S0 7.2 0 16.1c0 8 5.9 14.6 13.5 15.8V20.7H9.4v-4.6h4.1v-3.5c0-4 2.4-6.2 6-6.2 1.8 0 3.6.3 3.6.3v3.9h-2c-2 0-2.6 1.2-2.6 2.5v3h4.4l-.7 4.6h-3.7v11.2C26.1 30.7 32 24.1 32 16.1"
                  ></path>
                </svg>
              </router-link>
            </li>
            <li @mouseover="isList[2]=true" @mouseout="isList[2]=false">
              <router-link to="">
                <svg
                  width="18"
                  height="18"
                  version="1.1"
                  viewBox="0 0 32 32"
                  aria-hidden="false"
                >
                  <path
                  :fill="isList[2]?'#767676':'#d1d1d1'"
                    d="M16 2.9c4.3 0 4.8 0 6.5.1 1.6.1 2.4.3 3 .6.7.3 1.3.6 1.8 1.2.6.6.9 1.1 1.2 1.8.2.5.5 1.4.5 2.9.1 1.7.1 2.2.1 6.5s0 4.8-.1 6.5c-.1 1.6-.3 2.4-.6 3-.3.7-.6 1.3-1.2 1.8-.6.6-1.1.9-1.8 1.2-.6.2-1.4.5-3 .6-1.7.1-2.2.1-6.5.1s-4.8 0-6.5-.1c-1.6-.1-2.4-.3-3-.6-.7-.3-1.3-.6-1.8-1.2-.6-.6-.9-1.1-1.2-1.8-.1-.6-.4-1.5-.4-3-.1-1.7-.1-2.2-.1-6.5s0-4.8.1-6.5c0-1.5.3-2.4.5-2.9.3-.7.6-1.3 1.2-1.8.6-.6 1.1-.9 1.8-1.2.6-.3 1.5-.6 3-.6 1.7-.1 2.2-.1 6.5-.1M16 0c-4.3 0-4.9 0-6.6.1-1.7.1-2.9.3-3.9.7-1.1.4-1.9 1-2.8 1.8-.9 1-1.5 1.9-1.9 2.9-.4 1-.7 2.2-.7 3.9C0 11.1 0 11.7 0 16s0 4.9.1 6.6c.1 1.7.3 2.9.7 3.9.4 1.1 1 1.9 1.8 2.8.9.9 1.8 1.4 2.8 1.8 1 .4 2.2.7 3.9.7 1.8.2 2.4.2 6.7.2s4.9 0 6.6-.1c1.7-.1 2.9-.3 3.9-.7 1.1-.4 1.9-1 2.8-1.8.9-.9 1.4-1.8 1.8-2.8.4-1 .7-2.2.7-3.9.2-1.8.2-2.4.2-6.7s0-4.9-.1-6.6c-.1-1.7-.3-2.9-.7-3.9-.4-1.1-1-1.9-1.8-2.8-.9-.9-1.8-1.4-2.8-1.8-1-.4-2.2-.7-3.9-.7C20.9 0 20.3 0 16 0zm0 7.8c-4.5 0-8.2 3.7-8.2 8.2 0 4.5 3.7 8.2 8.2 8.2s8.2-3.7 8.2-8.2c0-4.5-3.7-8.2-8.2-8.2zm0 13.5c-2.9 0-5.3-2.4-5.3-5.3s2.4-5.3 5.3-5.3 5.3 2.4 5.3 5.3-2.4 5.3-5.3 5.3zm8.5-15.8c-1.1 0-1.9.9-1.9 1.9s.9 1.9 1.9 1.9 1.9-.9 1.9-1.9-.8-1.9-1.9-1.9z"
                  ></path>
                </svg>
              </router-link>
            </li>
          </ul>
          <hr color="#414141"/>
          <ul class="">
            <li class="hoverbox">
              <router-link to=""><span>bbb</span></router-link>
            </li>
            <li class="hoverbox">
              <router-link to=""><span>bbb</span></router-link>
            </li>
            <li class="hoverbox">
              <router-link to=""><span>bbb</span></router-link>
            </li>
            <li class="hoverbox">
              <router-link to=""><span>bbb</span></router-link>
            </li>
          </ul>
        </div>
      </a>
    </div>
    <div class="right">
      <div>
        <button class="hoverBg hoverColor">Submit <span>a photo</span></button>
      </div>
      <div>
        <a href="" class="hoverColor">Login</a>
        <a href="">Join free</a>
      </div>
    </div>
  </div>
</template>

<script>
import mySearch from "@/components/my-index/my-search.vue";
document.documentElement.addEventListener('click',function(){
      document.querySelector('.pop').style.display="none"

})
export default {
  data() {
    return {
      isOmit: false,
      isList:[false,false,false],
      
    };
  },
  methods:{
    showbox(){
      document.querySelector('.pop').style.display="inline-block"
    }
  },
  components: {
    mySearch,
  },
};
</script>

<style>
@import url("../../assets/css/my-header.css");
@import url("~@/assets/css/common.css");
@media (max-width: 47.9375rem) {
  .my-header > .center>a:nth-child(1) ,.my-header > .center>a:nth-child(2) {
    display: none;
  }
  .my-header > .right {
    display: none;
  }
  .my-header > .center .triangle{
    left: 15.625rem !important;
  }
   .my-header > .center .pop{
    left:-15.5625rem !important;
  }
  .my-header > .left > div:nth-child(1) > a > div:nth-child(2) {
    display: none;
  }
}
@media (min-width: 48rem) {
  .my-header > .left > div:nth-child(1) > a > div:nth-child(2) {
    display: none;
  }
  .my-header > .center > a:nth-child(2) > span > span:nth-child(2) {
    display: none;
  }
  .my-header > .right div:nth-child(1) > button > span {
    display: none;
  }
  .my-header > .center {
    margin: 0rem 1.5625rem;
  }
}
@media (min-width: 62rem) {
  .my-header > .center > a:nth-child(2) > span > span:nth-child(2) {
    display: inline-block;
  }
  .my-header > .right div:nth-child(1) > button > span {
    display: inline-block;
  }
  .my-header > .center {
    margin: 0rem 3.125rem;
  }
}
@media (min-width: 75rem) {
  .my-header > .left > div:nth-child(1) > a > div:nth-child(2) {
    display: inline-block;
  }
}
</style>